<template>
	<view class="container">
		
		<tui-sticky :scrollTop="scrollTop" stickyHeight="104rpx">
			<template v-slot:header>
				<view class="sticky-item">
					<view class="date">关联的账号</view>
					<view class="amount">
						<view>{{pageTotal}} 个</view>
					</view>
				</view>
			</template>
			
			<template v-slot:content>
				<!--内容 start-->
				<view v-for="(item,index) in dataList" :key="index" class="list-view">
					
				<tui-swipe-action :actions="actions" @click="handlerButton" :params="item">
					<template v-slot:content>
						<view class="list-item" hover-class="hover" :hover-stay-time="150">
							<view class="content-box">
								<tui-icon name="wealth-fill" :size="30" color="#ff5800" class="logo"></tui-icon>
								<view class="des-box">
									<view class="tit" v-html="item.friend_name"></view>
									<view class="time">{{item.add_time}}</view>
								</view>
							</view>
							<view class="money-date">
								<view class="des-box">
									<view class="time">{{item.friend_phone}}</view>
								</view>
							</view>
						</view>	
					</template>
				</tui-swipe-action>
						
						
					
				</view>
				<!--内容 end-->
			</template>
		</tui-sticky>
		
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<!--加载loadding-->
		
		<view class="tui-line-cell">
			<tui-button type="green"  hover-class="btn-hover" @click="goPageUrl('/pages/my/account-add')">绑定新账号</tui-button>
		</view>
		
		<footer-menu :tabCur="2"></footer-menu>
	</view>
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiSticky from "@/components/thorui/tui-sticky/tui-sticky"
	import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
	import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiSwipeAction from "@/components/thorui/tui-swipe-action/tui-swipe-action.vue"
	export default {
		components:{
			footerMenu,
			tuiIcon,
			tuiSticky,
			tuiLoadmore,
			tuiNomore,
			tuiButton,
			tuiSwipeAction
		},
		data() {
			return {
				scrollTop: 0,
				loadding: false,
				pullUpOn: true,
				
				myInfo: [],
				dataList: [],
				pageIndex: 1,
				pageCount: 0,
				pageTotal: 0,
				
				actions: [
					{name: '切换此账号',color: '#fff',fontsize: 30,width: 140,background: '#5677fc'},
					{name: '移除',color: '#fff',fontsize: 30,width: 70,background: '#FD3B31'}
				]
				
				
			}
		},
		methods: {
			
			
			//跳转到指定的URL页面
			goPageUrl: function(pageUrl) {
				uni.navigateTo({
					url: pageUrl
				})
			},
			
			
			handlerButton(e) {
				let index = e.index;
				let item = e.item;
				//console.log(index);
				//console.log(item);
				//console.log(item.friend_id);
				let friendId = item.friend_id;
				if(index === 0){				//切换账号
					this.doAccountChange(friendId);
				} else if (index == 1){		//删除
					this.doAccountDel(friendId);
				}
				
			//	let menuTxt = ['删除', '修改', '收藏'][index];
			//	console.log('您点击了【' + menuTxt + '】按钮')
			},
			
			
			doAccountChange: function(friendId){
				//退出登录
				// uni.setStorageSync('userId', 0);
				// uni.setStorageSync('userToken', '');
				// uni.setStorageSync('hasLogin', false);
				
				uni.request({
					url: this.$apiUrl + '/api/user/accountChange',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId'),
					},
					data:{
						'friend_id': friendId
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						let resCode = res.data['code'];
						if(resCode == 200){
							let resData = res.data['data'];
							let userId = resData.id;
							let userToken = resData.user_token;
							let shopId = resData.shop_id;
							this.tui.toast('账号切换成功', 2000, false);
							uni.setStorageSync('userId', userId);
							uni.setStorageSync('userToken', userToken);
							uni.setStorageSync('shopId', shopId);
							uni.setStorageSync('hasLogin', 1);
							setTimeout(() => {
								uni.switchTab({ url: '/pages/my/index' })
							}, 1000);
						}else{
							this.tui.toast(resMsg, 2000, false);
						}
					}
				});
				
				
			},
			
			doAccountDel: function(friendId) {
				//绑定手机号
				uni.request({
					url: this.$apiUrl+ '/api/user/accountBindDel',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						'friend_id': friendId
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						if(resErr == 0) {
							this.tui.toast("好友账号解绑成功", 2000, false);
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my/account-list'
								})
							}, 2000);
						}else{
							this.tui.toast(resMsg, 2000, false);
						}
					}
				});
				
			},
			
			
			getDataList: function(type) {
				if(type != 'append') this.pageIndex = 1;
				uni.request({
					url: this.$apiUrl + '/api/user/accountList',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
						'shopId': uni.getStorageSync('shopId')
					},
					data: {
						page_num: this.pageIndex
					},
					success: (res) => {
						let resData = res.data['data'];
						if(type == 'append') {		//底部分页加载更多
							this.dataList = this.dataList.concat(resData['list']);
						}else{
							this.dataList = resData['list'];
						}
						this.pageCount = resData['pager']['page_total'];
						this.pageTotal = resData['pager']['list_total'];
					}
				});
			},
			
		},
		
		
		//页面滚动执行方式
		onPageScroll(e) {
		//	this.scrollTop= e.scrollTop
		},
		
		onLoad: function(options) {
			this.getDataList();
		},
		
		
		onPullDownRefresh: function() {
		},
		
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == this.pageCount) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.pageIndex = this.pageIndex + 1;
				this.getdataList('append');
				this.loadding = true;
			}
		},
		
	}
</script>

<style>
	

	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tips {
		background: #fff;
		padding: 50rpx 34rpx;
		color: #555;
		font-size: 24rpx;
		line-height: 42rpx;
		position: relative;
	}

	.tips::before {
		content: '';
		position: absolute;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}

	/* .sticky-container{
		 position: relative;
		} */
		
	/* sticky 容器 start */
	.sticky-item {
		width: 100%;
		height: 104rpx;
		padding: 20rpx 30rpx;
		background: #fafafa;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	/* sticky 容器 end */

	.date {
		height: 54rpx;
		font-size: 28rpx;
		background: #fff;
		padding: 0 28rpx;
		border-radius: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		/* box-shadow: 0 0 1rpx #7A7A7A; */
	}

	.date::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1rpx solid #eaeef1;
		border-radius: 60rpx;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 0;
		top: 0;
	}

	.amount {
		text-align: right;
		color: #19be6b;
		font-size: 36rpx;
		font-weight: 700;
	}

	.list-view {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.list-view::after {
		content: '';
		position: absolute;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		right: 0;
		left: 0;
	}

	.list-item {
		width: 100%;
		padding: 30rpx 28rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.list-item::after {
		left: 120rpx
	}

	.item-last::after {
		left: 0 !important
	}

	.content-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.logo {
		width: 100rpx;
		height: 100rpx;
		flex-grow: 1;
		border-radius: 50rpx;
	}

	.des-box {
		min-height: 100rpx;
		padding-left: 28rpx;
		box-sizing: border-box;
		vertical-align: top;
		color: #333;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tit {
		font-size: 32rpx;
		max-width: 420rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.time {
		color: #888
	}
	
	.time-push{
		color:#11D61B;
	}
	
	.time-money{
		color:#F71B1B;
	}

	.money {
		font-size: 38rpx;
		font-weight: 500;
		color: #000;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 20rpx;
	}
	
	.money-date {
		font-size: 28rpx;
		font-weight: 500;
		color: #ff5800;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 20rpx;
	}

	.add {
		color: #ff5800 !important;
	}
	
	.del {
		color: #19be6b !important;
	}
	
	.tui-line-cell{
		width: 88%;
		margin: 200rpx auto;
	}
</style>